<template>
  <div style="background: #fff;box-sizing: border-box;padding-top: .18rem;" ref="bg">
    <div class="flex-between search">
      <img src="../../assets/img/house/arrow_back.png" alt="" class="return" @click="back">
      <div class="search-modal">
        <img src="../../assets/img/house/search.png" class="img" alt="">
        <input class="input" v-model="searchVal" type="text" placeholder="联系人" ref="input">
      </div>
      <div class="btn" @click="search">搜索</div>
    </div>
    <!-- 搜索列表 -->
    <div style="margin-top: .44rem;">
      <div class="list" v-for="(val,key) in lists" :key="key" @click="toDetails(val)">
        <img :src="val.icon" alt="">
        <p>{{val.name}}</p>
      </div>
    </div>
    <div v-show="noData" class="page-over">没有相关数据</div>
  </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
  /* 搜索*/
  .search {
    padding: 0;
    margin: 0 .18rem .18rem;
    height: .4rem;
    .return {
      width: .12rem;
      height: .2rem;
      margin-right: .05rem;
    }
    .search-modal {
      background: #F0F0F7;
      height: 100%;
      line-height: .4rem;
      flex: 1;
      border-radius: .13rem;
    }
    .img {
      width: .18rem;
      margin-left: .18rem;
      vertical-align: -.04rem;
    }
    .input {
      margin-bottom: .04rem; /* 苹果要加边个样式 */
      background: #f0f0f7;
      flex: 1;
      font-size: .16rem;
      color: #333;
      padding-left: .02rem;
      &::-webkit-input-placeholder {
        color: #ccc;
      }
    }
    .btn {
      width: .32rem;
      height: .4rem;
      line-height: .4rem;
      text-align: center;
      color: #157FFB;
      font-size: .16rem;
      margin-left: .18rem;
      font-weight: bold;
    }
  }

  /* 列表*/
  .list {
    display: flex;
    box-sizing: border-box;
    margin: 0 .18rem;
    height: .64rem;
    align-items: center;
    border-bottom: .005rem solid #dedede;
    &:nth-last-child(1) {
      border-bottom: none;
    }
    img {
      width: .4rem;
      height: .4rem;
      border-radius: 50%;
      margin-right: .12rem;
    }
    p {
      font-size: .16rem;
      color: #333333;
    }
  }
</style>
<script>
  import {Toast} from 'mint-ui'

  export default {
    data () {
      return {
        searchVal: '',  // 搜索
        lists: [], // 数据
        noData: false // 没有搜索结果
      }
    },
    created () {
      setTimeout(() => {
        this.$refs.input.focus()
      }, 800)

    },
    mounted () {
      this.$refs.bg.style.height = window.innerHeight + 'px'
    },
    methods: {
      // 返回
      back () {
        history.back()
      },
      /* 搜索 */
      search () {
        if (!this.searchVal.trim()) {
          Toast({
            message: '搜索内容不能为空',
            duration: 500
          })
          return
        }
        this.lists = [{'icon': 'http://placekitten.com/200/198', 'name': '小明', 'url': 'http://www.baidu.com'},
          {'icon': 'http://placekitten.com/200/198', 'name': '小明2'},
          {'icon': 'http://placekitten.com/200/198', 'name': '小明3'}]
        // this.getShopList()
      },
      /* 应用详情*/
      toDetails (val) {
        window.location.replace(val.url)
      },
    }
  }

</script>
